<%--
  Created by IntelliJ IDEA.
  User: CURRY
  Date: 2021/10/13
  Time: 19:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="renderer" content="webkit">
    <title></title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/pintuer.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/admin.css">
    <script src="${pageContext.request.contextPath}/static/js/jquery.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/pintuer.js"></script>
</head>
<body>
<div class="panel admin-panel">
    <div class="panel-head" id="add"><strong><span class="icon-pencil-square-o"></span>增加内容</strong></div>
    <div class="body-content">
        <form method="post" action="">
            <div class="panel admin-panel">
                <div class="padding border-bottom">
                    <ul class="search">
                        <li>
                            <%--                            <button type="button" class="button border-green" id="checkall"><span
                                                                class="icon-check"></span> 全选
                                                        </button>
                                                        <button type="submit" class="button border-red"><span class="icon-trash-o"></span> 批量删除
                                                        </button>--%>
                            <input type="text" class="input w50" id="doctor" size="50"/>
                            <button type="submit" class="button border-yellow" onclick="query()">查询</button>
                            <span class="x-right" style="line-height:40px" id="showTotal">共有数据：1 条</span>
                        </li>
                    </ul>
                </div>
                <table class="table table-hover text-center">
                    <tr>
                        <th>体检医生</th>
                        <th>体检人</th>
                        <th>年龄</th>
                        <th>性别</th>
                        <th>体检日期</th>
                        <th>状况</th>
                        <th>体检状态</th>
                        <th>操作</th>
                    </tr>
                    <tr>
                        <td id="tab"></td>
                    </tr>
                    <td>
                        <div class="button-group"><a class="button border-main" href="add.html"><span
                                class="icon-edit"></span> 信息回馈</a></div>
                    </td>
                    <tr>
                        <td colspan="8">
                            <div class="pagelist"><a href="">上一页</a> <span class="current">1</span><a href="">2</a><a
                                    href="">3</a><a href="">下一页</a><a href="">尾页</a></div>
                        </td>
                    </tr>
                </table>
            </div>
        </form>
    </div>
</div>

<script type="text/javascript">
    // 总页数
    var totalPages = 0;
    // 总条数
    var totalCounts = 0;
    // 当前页
    var currentPage = 0;
    // 页面加载完成就去执行此代码，主要目的就是加载按钮，以及当页面中pageNum发生变化时，去执行后台查询数据方法
    $(document).ready(function () {
        // 第一次执行selectAllUser函数，用于初始化参数
        selectAllUser(-1);
        // 加载按钮
        $("#pagination1").jqPaginator({
            // 总页数
            totalPages: totalPages,
            // 总条数
            totalCounts: totalCounts,
            // 当前页
            currentPage: currentPage,
            // 首页
            first: '<li class="first"><a href="javascript:void(0)">首页</a></li>',
            // 上一页
            prev: '<li class="prev"><a href="javascript:void(0)">上一页</a></li>',
            // 下一页
            next: '<li class="next"><a href="javascript:void(0)">下一页</a></li>',
            // 末页
            last: '<li class="last"><a href="javascript:void(0)">末页</a></li>',
            // 当前页
            page: '<li class="page"><a href="javascript:void(0)">{{page}}</a></li>',
            // pageNum改变执行函数，参数n其实就是pageNum
            onPageChange: function (n) {
                selectAllUser(n);
            }
        })
    })

    // selectAllUser
    function selectAllUser(n) {
        // ajax请求
        $.ajax({
            // 请求服务器的路径
            url: "../doctor/query",
            // 提交方式
            type: "post",
            // 服务器响应数据类型
            dataType: "json",
            // 此需求需要设置为同步请求
            async: false,
            // 发送给服务器的数据内容
            data: {
                "pageNum": n,
                "pageSize": 5,
            },//成功回调函数
            success: function (data) {
                // 显示数据条数
                $("#showTotal").text("共有数据：" + data.total + "条");
                // 获取用户数据
                let userList = data.list;
                if (userList.length > 0) {
                    // 当数据库有用户数据的时候，进行初始化
                    if (n === -1) {
                        totalPages = data.pages;
                        totalCounts = data.total;
                        currentPage = data.pageNum;
                    }
                    // 定义一个空字符串，用来拼接用户数据信息
                    let str = '';
                    // 通过一个for循环，拼接用户数据
                    for (let i = 0; i < userList.length; i++) {
                        str += "<tr>" +
                            "<td>" + userList[i].appointId + "</td>" +
                            "<td>" + userList[i].name + "</td>" +
                            "<td>" + userList[i].age + "</td>" +
                            "<td>" + userList[i].sex + "</td>" +
                            "<td>" + userList[i].doctor + "</td>" +
                            "<td>" + userList[i].symptom + "</td>" +
                            "<td>" + userList[i].state + "</td>" +
                            "<td>" + userList[i].appointmentDate + "</td>" +
                            "<td>" + userList[i].feedback + "</td>" +
                            "</tr>";
                    }
                    // 把拼接好的用户数据信息字符串str，通过jQuery方法html()，填充在页面tbody中
                    $("#tab").html(str);
                } else {
                    // 当数据库没有用户数据的时候，进行初始化
                    totalPages = 1;
                    totalCounts = 1;
                    currentPage = 1;
                    $("#tab").html("<tr><td colspan='8' align='center'>没有用户数据，请添加</td></tr>")
                }

            },// 失败回调
            error: function () {
                alert("服务器错误");
            }
        })
    }

</script>

</body>
</html>
